<template>
  <div>
    <div class='online-detail'>

      <div class="detail-header">
        <el-form :model="form"
                 label-width="80px">
          <el-form-item label="学生昵称 :">
            <el-input v-model="form.name"
                      placeholder="请输入昵称"
                      type="medium"></el-input>
          </el-form-item>
          <el-form-item label="课程名称 :">
            <el-input v-model="form.name"
                      placeholder="请输入名称"></el-input>
          </el-form-item>
          <el-form-item label="视频名称 :">
            <el-input v-model="form.name"
                      placeholder="请输入名称"></el-input>
          </el-form-item>
        </el-form>
        <div class="block">
          <span class="demonstration">时间选择 :</span>
          <el-date-picker v-model="value1"
                          type="daterange"
                          range-separator="~"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <el-button type="primary"
                   size="small">查询</el-button>
      </div>
      <div class="detail-body">
        <el-table :data="tableData"
                  style="width: 100%"
                  border>
          <el-table-column prop="date"
                           label="学生昵称">
          </el-table-column>
          <el-table-column prop="name"
                           label="课程名称">
          </el-table-column>
          <el-table-column prop="address"
                           label="视频名称">
          </el-table-column>
          <el-table-column prop="name"
                           label="学习时间">
          </el-table-column>
          <el-table-column prop="address"
                           label="学习时长">
          </el-table-column>
        </el-table>
      </div>
      <div class="detail-footer">
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="page"
                       :page-sizes="[10, 20, 30, 40]"
                       :page-size="pagesize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </div>

    </div>
    <div class="shallow"></div>
  </div>
</template>
<script>
export default {
  name: 'onlineDetail',
  components: {},
  props: {},
  data() {
    return {
      form: {
        name: ''
      },
      tableData: [],
      page: 1,
      pagesize: 10,
      total: 0
    }
  },
  computed: {},
  watch: {},
  methods: {
    handleSizeChange(newVal) {
      this.pagesize = newVal
    },
    handleCurrentChange() {
      this.page = newVal
    }
  },
  created() {},
  mounted() {}
}
</script>
<style lang='less' scoped>
.online-detail {
  position: relative;
  padding: 20px;
}
/deep/ .detail-header .el-input__inner {
  width: 160px !important;
  height: 35px;
}
.el-form-item {
  display: inline-block;
  margin-right: 20px;
}
.block {
  display: inline-block;
  position: absolute;
  right: 298px;
  top: 22px;
}
/deep/ .el-date-editor {
  width: 260px !important;
  height: 35px;
}
.demonstration {
  margin-right: 15px;
}
.el-button {
  position: absolute;
  top: 23px;
  right: 225px;
}
.el-table {
  border-bottom: 1px solid #ebeef5;
}
/deep/ .el-table th {
  background-color: #f6f7fb;
  text-align: center;
}
/deep/ .el-pagination {
  position: absolute;
  right: 30px;
  top: 214px;
}
.detail-footer {
  height: 80px;
}
.shallow {
  height: 680px;
  background-color: #f5f5f5;
}
</style>